<script setup lang="ts">
import { ref } from 'vue'

const props = defineProps<{
  node: any
}>()

const emit = defineEmits<{
  (e: 'reply', id: string): void
}>()

const toggleChildren = () => {
  props.node.showChildren = !props.node.showChildren
}

const startReply = () => {
  emit('reply', props.node.id)
}
</script>

<template>
  <li class="reply-item">
    <div class="header">
      <span class="username">{{ node.userName }}</span>
      <span class="time">{{ node.createTime }}</span>
    </div>
    <div class="text">{{ node.content }}</div>
    <div class="actions">
      <button @click="startReply">回复</button>
    </div>

    <button v-if="node.children?.length" class="toggle-btn" @click="toggleChildren">
      {{ node.showChildren ? '收起回复' : '展开回复 (' + node.children.length + ')' }}
    </button>

    <ul v-show="node.showChildren" class="children-replies">
      <ReplyNode 
        v-for="child in node.children" 
        :key="child.id" 
        :node="child" 
        @reply="$emit('reply', $event)" />
    </ul>
  </li>
</template>

<style scoped>
.reply-item { padding:10px 0; border-bottom:1px dashed #ddd; }
.reply-item .header { display:flex; justify-content:space-between; font-weight:600; color:#0071eb; margin-bottom:4px; }
.reply-item .text { color:#444; margin-bottom:6px; }
.reply-item .actions button { background:transparent; border:none; color:#0071eb; cursor:pointer; font-size:13px; padding:0; }
.reply-item .actions button:hover { text-decoration:underline; }
.reply-item > button { background:transparent; border:none; color:#0071eb; cursor:pointer; font-size:13px; margin-top:4px; padding:0; }
.reply-item > button:hover { text-decoration:underline; }
.reply-item ul { list-style:none; padding-left:20px; margin-top:8px; border-left:2px solid #f0f0f0; }
</style>
